
<template>
	<div ref='pages' class='pages' :style="{'left':this.$props.isShow?'0':'-100%'}">
		<div class="header">
			<span @click="hidenPages" class="iconfont black">
					<span style="padding-left: 5px;font-size: 1.5em;font-weight: bold;">
						&#xe6ff;
					</span>
					<span>
						返回
					</span>
			</span>
			<!-- 标题 -->
			<span class="Heaer_title">
				{{$props.title}}
			</span>
		</div>
		 <slot>我就是默认值</slot>  
	</div>
</template>

<script lang="ts">
import {defineComponent,ref,watch,onMounted} from 'vue'
export default defineComponent({
	props:{
		'isShow':{
			type:Boolean,
			default:true
		},
		'title':{
			type:String,
			default:'劲酒'
		}
	},
	setup(props,{emit}){
		//默认显示 组建
		let pagesTarget=ref('pagesTargetName')
		let pages:any=ref(null)
		const isPages=ref(true)
		function hidenPages(){
			emit('hiden');
		}
		watch(()=>props.isShow,(oldVal,newVal)=>{
			if(!newVal){
				pages.value.style.display='block'
			}else{
				setTimeout(()=>{
					pages.value.style.display='none'
				},300)
			}
		})
		onMounted(()=>{
			pages.value.style.display='none'
		})
		return {
			isPages,
			hidenPages,
			pages
		}
	}
})
</script>

<style scoped="scoped">
	.black{
		float: left;
		cursor: pointer;
		position:absolute;
		left: 0;
		top: 0;
	}
	.pages{
		width: 100vw;
		height: 100vh;
		z-index: 999;
		background-color: #f4f4f4;
		position:fixed;
		top: 0;
		left: 0;
		transition: all .3s linear;
		padding-bottom: 20vh;
		overflow-x: hidden;
		overflow-y: scroll;
	}
	.header{
		width: 100%;
		background: #fff;
		border-bottom: 1px solid #B4BCCC;
		line-height: 2.5em;
		text-align: center;
		position: relative;
	}	
	.Heaer_title{
		font-size: 1.3em;
	}
</style>
